<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!--
/*
 * examples/mixed/index.html
 * 
 * This file is part of EditableGrid.
 * http://editablegrid.net
 *
 * Copyright (c) 2011 Webismymind SPRL
 * Dual licensed under the MIT or GPL Version 2 licenses.
 * http://editablegrid.net/license
 */
-->

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>EditableGrid - Minimal demo - Mixing Javascript and XML</title>
		
		<script src="../../editablegrid-2.0.1.js"></script>
		<link rel="stylesheet" href="../../editablegrid-2.0.1.css" type="text/css" media="screen">
		
		<style>
			body { font-family:'lucida grande', tahoma, verdana, arial, sans-serif; font-size:11px; }
			h1 { font-size: 15px; }
			a { color: #548dc4; text-decoration: none; }
			a:hover { text-decoration: underline; }
			table.testgrid { border-collapse: collapse; border: 1px solid #CCB; width: 800px; }
			table.testgrid td, table.testgrid th { padding: 5px; border: 1px solid #E0E0E0; }
			table.testgrid th { background: #E5E5E5; text-align: left; }
			input.invalid { background: red; color: #FDFDFD; }
		</style>
		
		<script>
			window.onload = function() {
				editableGrid = new EditableGrid("DemoGridMixed");

				// we build and load the metadata in Javascript
				editableGrid.load({ metadata: [
					{ name: "name", label: "NAME", datatype: "string", editable: true },
					{ name: "firstname", label: "FIRSTNAME", datatype: "string", editable: true },
					{ name: "age", label: "AGE", datatype: "integer", editable: true },
					{ name: "height", label: "HEIGHT", datatype: "double(m,2)", editable: true },
					{ name: "country", label: "COUNTRY", datatype: "string", editable: true, values: 
					  	{ 'Europe': { "be" : "Belgium", "fr" : "France", "uk" : "Great-Britain", "nl": "Nederland"},
						  'America': { "br" : "Brazil", "ca": "Canada", "us" : "USA" },
						  'Africa': { "ng" : "Nigeria", "za": "South-Africa", "zw" : "Zimbabwe" }
					  	}
					},
					{ name: "email", label: "EMAIL", datatype: "email", editable: true },
					{ name: "freelance", label: "FREELANCE", datatype: "boolean", editable: true },
					{ name: "lastvisit", label: "LAST VISIT", datatype: "date", editable: true }
				]});
				
				// then we load the actual content from an URL which outputs the data as XML
				editableGrid.tableLoaded = function() { this.renderGrid("tablecontent", "testgrid"); };
				editableGrid.loadXML("data.xml");
			} 
		</script>
		
	</head>
	
	<body>
		<h1>EditableGrid - Minimal Demo - Mixing Javascript and XML - <a href="../index.html">Back to menu</a></h1> 
		<div id="tablecontent"></div>
	</body>

</html>
